<!--
 * @Author: fishroom
 * @Date: 2021-08-22 12:23:42
 * @LastEditTime: 2021-08-22 21:49:18
 * @FilePath: \index\src\views\home\childComps\RankingListView.vue
-->

<template>
  <div>
    <title-item>
      <em slot="title" class="flex">排行榜</em>
      <em slot="text" class="hot-audio-right"
        ><i class="hot-text">更多</i>&#xe629;</em
      >
    </title-item>
    <ranking-slides
      :imgClass="SongPushImg"
      :textClass="pushText"
      :swiperOption="swiperOption"
    />
  </div>
</template>

<script>
import { mapActions } from "vuex";
import TitleItem from "components/content/title/TitleItem.vue";
import RankingSlides from "components/common/swiper/RankingSlides";
export default {
  name: "RankingListView",
  components: {
    TitleItem,
    RankingSlides
  },
  computed: {},
  methods: {
    ...mapActions(["getRanking"])
  },
  mounted() {
    this.getRanking();
  },
  data() {
    return {
      currentType: "newSong",
      SongPushImg: "SongPushImg",
      pushText: "pushText",
      homeSongClass: "h-song-push",
      pageText: "recommend-page-text",
      swiperOption: {
        notNextTick: true,
        //循环
        loop: false,
        //设定初始化时slide的索引
        initialSlide: 0,
        //视图显示个数
        slidesPerView: 1,
        // freeMode: true,
        touchRatio: 2, //触摸变慢
        //自动播放
        autoplay: false,
        //滑动速度
        speed: 1000,
        //滑动方向
        direction: "horizontal",
        paginationClickable: true,
        //小手掌抓取滑动
        grabCursor: true,
        //个体类名替换
        slideClass: "my-slide",
        wrapperClass: "my-wrapper",
        //滑动之后回调函数
        on: {
          slideChangeTransitionEnd: function() {
            // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
          }
        }
      }
    };
  }
};
</script>
